<template>
  <div class="module-wrap h-full">
    <div class="title-wrap title-wrap_2 config">
      <span class="title">数据总览</span>
      <div class="option"></div>
    </div>
    <div class="data_info">
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="`item_${index + 1}`"
      >
        <div class="info">
          <div>{{ item.num || 0 }}</div>
          <div>{{ item.label }}</div>
        </div>
        <div class="icon"></div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { shallowRef } from 'vue';
import { fetchDataScreen } from '../api';

const list = shallowRef([
  {
    label: '设备总数',
    num: 0,
  },
  {
    label: '项目总数',
    num: 0,
  },
  {
    label: '检测阵总数',
    num: 0,
  },
  {
    label: '测点总数',
    num: 0,
  },
]);

enum labelEnum {
  deviceTotalNum = '设备总数',
  projectTotalNum = '项目总数',
  monitorTotalNum = '监测阵总数',
  pointTotalNum = '测点总数',
}

const init = () => {
  fetchDataScreen().then((res) => {
    list.value = Object.keys(labelEnum).map((key) => {
      return {
        label: labelEnum[key],
        num: res.data[key],
      };
    });
  });
};

init();
</script>
